
<template>
  <navigator
    class=""
    target=""
    :url="`/pages/search/particulars/index?id=${data.id}`"
    hover-class="navigator-hover"
    open-type="navigate"
    
  >
    <view class="seek-list"
    @click="()=>{
      Log(data)
    }"
    >
      <view class="profile-card">
        <image class="profile-img" :src="['.jpg', '.jpeg', '.png', '.gif', '.webp'].some(item => data.avatar.endsWith(item)) ? data.avatar : '/static/tabs/user_default.png'" />
        <view class="profile-info">
          <view class="name-gender">
            <text class="name">{{ data.nickname === '' ? '暂无数据' : data.nickname }}</text>
            <image
              class="gender-icon"
              :src="data.gender === '男' ? '/static/images/boy.png' : '/static/images/girl.png'"
            />
          </view>
          <view class="details">
            <text class="details-desc">{{
              data.household_region === '' ? '暂无数据' : data.household_region
            }}</text>
            <text class="details-desc">{{ data.age ? '暂无数据' : data.age + '岁' }}</text>
            <text class="details-desc">{{
              data.marital_status === '' ? '暂无数据' : data.marital_status
            }}</text>
            <text class="details-desc">{{ data.height ? '暂无数据' : data.height + 'cm' }}</text>
            <text class="details-desc">{{
              data.occupation === '' ? '暂无数据' : data.occupation
            }}</text>
            <text class="details-desc">{{
              data.education === '' ? '暂无数据' : data.education
            }}</text>
            <!-- <text class="details-desc">5年</text> -->
          </view>
          <view class="tags">
            <view class="tag">{{ data.hobbies === '' ? '暂无数据' : data.hobbies }}</view>
          </view>
        </view>
      </view>
      <view class="desc">{{
        data.self_introduction === '' ? '暂无数据' : data.self_introduction
      }}</view>
      <view class="requirements">
        <view class="requirement-tag">寻觅</view>
        <view class="requirement-text">
          <text
            >{{ data.ask.age_range === '' ? '暂无数据' : data.ask.age_range + '岁' }},{{
              data.ask.height_range === '' ? '暂无数据' : data.ask.height_range + 'cm'
            }},{{
              data.ask.desired_marital_status === '' ? '暂无数据' : data.ask.desired_marital_status
            }},{{ data.ask.minimum_education === '' ? '暂无数据' : data.ask.minimum_education }},{{
              data.ask.minimum_income ? '暂无数据' : data.ask.minimum_income
            }}</text
          >
        </view>
      </view>
    </view>
  </navigator>
</template>

<script setup lang="ts">
import type { UserItem } from '@/types/index/home'
import { postTopGuestsAPI } from "@/services/index/home";
defineProps<{ data: UserItem }>()
const Log = (data) =>{
    // 新增访客记录
    postTopGuestsAPI(data)
  }
</script>

<style scoped lang="scss">
.seek-list {
  border-radius: 10rpx;
  margin: 20rpx;
  padding: 10rpx;
  background-color: #ffffff;
  box-shadow: 1rpx 1rpx 15rpx 0rpx #2e2323;
    margin-top:35px;
  background-size: cover;
  background-position: center;
}

.profile-card {
  display: flex;
  border-radius: 8px;
  padding: 3px;
  

  margin-bottom: 8px;
  .profile-img {
    width: 45px;
    position: relative;
    top: -20px;
    left: -10px;
    height: 45px;
    border-radius: 10%;
    margin-right: 8px;
    border-radius: 50px;
    border: 3px solid rgb(65, 57, 57);
  }

  .profile-info {
    flex: 1;

    .name-gender {
      display: flex;
      align-items: center;
      margin-bottom: 8px;

      .name {
        font-size: 20px;
        font-weight: bold;
        margin-right: 8px;
      }

      .gender-icon {
        width: 16px;
        height: 16px;
      }
    }

    .details {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 8rpx;

      .details-desc {
        color: #666666;
        font-size: 32rpx;
      }

      text {
        margin-right: 8px;
        color: #666;
      }
    }

    .tags {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 8rpx;
      font-size: 27rpx;

      .tag {
        background-color: #f2fbfc;
        color: #00aabf;
        padding: 4rpx 8rpx;
        border-radius: 4rpx;
        margin-right: 8rpx;
        margin-bottom: 8rpx;
      }
    }
  }
}

.desc {
  font-size: 15px;
  line-height: 1.5;
  color: #999999;
  margin-bottom: 8px;
}

.requirements {
  display: flex;
  align-items: center;

  .requirement-tag {
    background-color: #00bfa5;
    color: #ffffff;
    padding: 4px 8px;
    border-radius: 4px;
    margin-right: 8px;
    white-space: nowrap;
  }

  .requirement-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #666666;
  }
}
</style>
